<template>
  <div class="test">
    <el-row class="login-container">
      <el-col :lg="16" :md="12" class="left">
        <div>
          <div>
            基于区块链技术构建
          </div>
          <div>
            茶叶溯源系统
          </div>
        </div>
      </el-col>

      <el-col :lg="8" :md="12" class="right">
        <h2 class="title">欢迎登录</h2>
        <div>
          <div>
            <span class="line"></span>
            <span>用户名密码登录</span>
            <span class="line"></span>
          </div>

          <span>
          <el-form class="w-[250px]" :rules="rules" ref="formRef" :model="form">
              <el-form-item prop="userType">
                <el-input v-model="form.userType" disabled>
                </el-input>
              </el-form-item>
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名">
                   <template #prefix>
                      <el-icon><user/></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                  <template #prefix>
                      <el-icon><lock/></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button round class="w-[250px]" color="#6ee7b7" type="primary" @click="submit">登录</el-button>
              </el-form-item>
            </el-form>
        </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {ElMessage, ElNotification} from 'element-plus'
import {useRouter} from "vue-router";
import { useCookies } from '@vueuse/integrations/useCookies'
import {post} from "@/utils/axiosMethod.js";

//useRouter: 路由实例对象
//useRoute: 路由信息

const router = useRouter() //实例化路由
const form = reactive({
  userType: '企业',
  username: 'hnkj',
  password: '123456'
})
const formRef = ref(null)//创建一个dom引用

const submit = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        post("/user/login", {
          username: form.username,
          password: form.password,
          groupName: form.userType
        }, (qymc, message)=> {
          console.log(qymc)
          ElMessage({
            message,
            type: 'success',
            duration: 1000
          })
          router.push('/index')
        })
      } catch (err) {
        console.log("errorOne" + err)
        ElNotification({
          message: "请求失败~",
          type: 'error',
          duration: 1500
        })
      }
    } else {
      ElNotification({
        message: "请输入完整!",
        type: 'error',
        duration: 1500
      })
    }
  })
}

const rules = reactive({
  username: [
    {required: true, message: '用户名不能为空', trigger: 'change'},
    {min: 1, max: 6, message: '长度小于7', trigger: 'blur'},
  ],
  password: [{
    required: true,
    message: '密码不能为空',
    trigger: 'change',
  },
  ],
})

</script>

<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-image: url('/src/assets/vue.svg');
}

.login-container {
  @apply  min-h-screen;
}

.login-container .left, .login-container .right {
  @apply flex items-center justify-center;
}

.login-container .right {
  @apply bg-light-50  flex-col;
}

.left > div > div:first-child {
  @apply font-bold text-5xl text-yellow-500 mb-4;
}

.left > div > div:last-child {
  @apply font-bold text-3xl text-lime-500;
}

.right .title {
  @apply font-bold text-5xl mb-4 text-green-500;
}

.right > div > div:first-child {
  @apply flex items-center justify-center my-5 text-gray-400 space-x-2;
}

.right .line {
  @apply h-[1px] w-16 bg-gray-200;
}
</style>